import React from 'react'
import { HashRouter, BrowserRouter, Link, NavLink, Route, Router, Switch, Redirect, withRouter } from 'react-router-dom'
import { Card, Button, Radio, Progress, Drawer, Menu, Dropdown, Icon } from 'antd'
import DownFile from '../network/download'    //todo 自定义下载组件
import ButtonSize from './components/button-size'
import ButtonLoadiong from './components/button-loadiong'
import "antd/dist/antd.less";                 //todo kim-stamp 引入官方提供的 less 全部样式
import './index.less'
// import rj from 'npm-rongjing'

const ButtonGroup = Button.Group;

export default class Buttons extends React.Component {

  state = {
    loading: true,
    size: 'default',
    visible: false
  }

  handleOpenLoading = () => {
    this.setState({
      loading: true
    })
  }

  handleCloseLoading = () => {
    this.setState({
      loading: false
    })
  }

  handleChange = (e) => {
    this.setState({
      size: e.target.value,
    })
  }


  showDrawer = () => {
    this.setState({
      visible: true,
    })
  }

  onClose = () => {
    this.setState({
      visible: false,
    })
  }

  render() {
    return (
      <>

        <Card title='按钮有五种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次' style={{ marginTop: 10 }}>
          <Button type="primary">Primary</Button>
          <Button>Default</Button>
          <Button type="dashed">Dashed</Button>
          <Button type="danger">Danger</Button>
          <Button type="link">Link</Button>
          <DownFile icon="cloud-upload" />
          <DownFile api_url="www.baidu.com" text="云下载" icon="cloud-download" />
        </Card>


        <Card title="图形按钮" className="card-wrap" style={{ marginTop: 10 }}>
          <Button type="primary" shape="circle" icon="search" />
          <Button type="primary" shape="circle"> 峰 </Button>
          <Button type="primary" icon="search"> Search </Button>
          <Button shape="circle" icon="search" />
          <Button icon="search">Search</Button>
          <Button type="dashed" shape="circle" icon="search" />
          <Button type="dashed" icon="search"> Search </Button>
          <p style={{ marginBottom: 10 }}></p>
          <Button icon="plus">创建</Button>
          <Button icon="edit">编辑</Button>
          <Button icon="delete">删除</Button>
          <Button shape="circle" icon="search"></Button>
          <Button type="primary" icon="search">搜索</Button>
          <Button type="primary" icon="download">下载</Button>
        </Card>

        <Card title='按钮有大、中、小三种尺寸' style={{ marginTop: 10 }}>
          <ButtonSize />
        </Card>


        <Card title='添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变' style={{ marginTop: 10 }}>
          <Button type="primary">Primary</Button>
          <Button type="primary" disabled> Primary(disabled) </Button>
          <br />
          <Button>Default</Button>
          <Button disabled>Default(disabled)</Button>
          <br />
          <Button type="dashed">Dashed</Button>
          <Button type="dashed" disabled> Dashed(disabled) </Button>
          <br />
          <Button type="link">Link</Button>
          <Button type="link" disabled> Link(disabled) </Button>
          <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
            <Button ghost>Ghost</Button>
            <Button ghost disabled> Ghost(disabled) </Button>
          </div>
        </Card>

        <Card title='加载中状态' style={{ marginTop: 10 }}>
          <ButtonLoadiong />
        </Card>


        <Card title='按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用' style={{ marginTop: 10 }}>
          <Button type="primary">primary</Button>
          <Button>secondary</Button>
          <Dropdown overlay={<Menu onClick={(e) => console.log('click', e)}> <Menu.Item key="1">1st item</Menu.Item> <Menu.Item key="2">2nd item</Menu.Item> <Menu.Item key="3">3rd item</Menu.Item> </Menu>}>
            <Button> Actions <Icon type="down" /> </Button>
          </Dropdown>
        </Card>

        <Card title='按钮组合' style={{ marginTop: 10 }}>
          <h4>基本</h4>
          <ButtonGroup>
            <Button>Cancel</Button>
            <Button>OK</Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button disabled>L</Button>
            <Button disabled>M</Button>
            <Button disabled>R</Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button>L</Button>
            <Button>M</Button>
            <Button>R</Button>
          </ButtonGroup>

          <h4>带图标</h4>
          <ButtonGroup>
            <Button type="primary">
              <Icon type="left" />
              Go back
              </Button>
            <Button type="primary">
              Go forward
                <Icon type="right" />
            </Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button type="primary" icon="cloud" />
            <Button type="primary" icon="cloud-download" />
          </ButtonGroup>
          <ButtonGroup>
            <Button type="primary" size="small" icon="cloud" />
            <Button type="primary" size="small" icon="cloud-download" />
          </ButtonGroup>
        </Card>



        <Card title="幽灵按钮" className="card-wrap" style={{ marginTop: 10 }}>
          <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
            <Button ghost type="primary"> Primary </Button>
            <Button ghost>Default</Button>
            <Button ghost type="dashed"> Dashed </Button>
            <Button ghost type="danger"> danger </Button>
            <Button ghost type="link"> link </Button>
          </div>
        </Card>

        <Card title="幽灵按钮" className="card-wrap" style={{ marginTop: 10 }}>
          <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
            <Button type="primary" block> Primary </Button>
            <Button block>Default</Button>
            <Button type="dashed" block> Dashed </Button>
            <Button type="danger" block> Danger </Button>
            <Button type="link" block> Link </Button>
          </div>
        </Card>




        <Card title="Progress进度条" className="card-wrap" style={{ marginTop: 10 }}>
          <div>
            {[
              { type: "circle", percent: 0, status: "exception" },
              { type: "circle", percent: 50, format: percent => `${percent} 天` },
              { type: "circle", percent: 99.9 },
            ].map(item => <Progress {...item} />)}
          </div>

          <div>
            {[
              { percent: 0, status: "exception" },
              { percent: 50, showInfo: false, strokeColor: { from: '#108ee9', to: '#87d068', } },
              { percent: 99.9 },
            ].map(item => <Progress {...item} />)}
          </div>
        </Card>


      </>
    );
  }
}


// API#
// 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。

// 按钮的属性说明如下：
// 属性	                 说明	类型	默认值	版本
// disabled	            按钮失效状态	boolean	false	3.5.1
// ghost	              幽灵属性，使按钮背景透明，版本 2.7 中增加	boolean	false	
// href	                点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-	
// htmlType	            设置 button 原生的 type 值，可选值请参考 HTML 标准	string	button	
// icon	                设置按钮的图标类型	string	-	
// loading	            设置按钮载入状态	boolean | { delay: number }	false	
// shape	              设置按钮形状，可选值为 circle、 round 或者不设	string	-	
// size	                设置按钮大小，可选值为 small large 或者不设	string	default	
// target	              相当于 a 链接的 target 属性，href 存在时生效	string	-	
// type	                设置按钮类型，可选值为 primary dashed danger link(3.17 中增加) 或者不设	string	-	
// onClick	            点击按钮时的回调	(event) => void	-	
// block	              将按钮宽度调整为其父宽度的选项	boolean	false	3.8.0
// 支持原生 button 的其他所有属性。
// FAQ#
// 如何移除两个汉字之间的空格？#
// 根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，
//可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。

//—————————————————————————————————————————————————————————————————————————————————————————————————————————————————

//kim-stamp进度条
// 各类型共用的属性。
// 属性	                 说明	类型	默认值	版本
// type	                类型，可选 line circle dashboard	string	line
// status	              状态，可选：success exception normal active(仅限 line)	string	-
// format	              内容的模板函数	function(percent, successPercent)	percent => percent + '%'
// percent	            百分比	number	0
// showInfo	            是否显示进度数值或状态图标	boolean	true
// strokeLinecap        Enum{ 'round', 'square' }	round	3.8.0
// strokeColor	        进度条的色彩	string	-	3.7.0
// successPercent	      已完成的分段百分比	number	0	3.2.0

// type="line"
// 属性	                 说明	 类型	默认值	版本
// strokeWidth	        进度条线的宽度，单位 px	number	10	3.13.1
// strokeColor	        进度条的色彩，传入 object 时为渐变	string | { from: string; to: string; direction: string }	-	3.16.0

// type="circle"
// 属性	                 说明	类型	默认值	版本
// width	              圆形进度条画布宽度，单位 px	number	132	3.13.1
// strokeWidth	        圆形进度条线的宽度，单位是进度条画布宽度的百分比	number	6	3.13.1
// strokeColor	        圆形进度条线的色彩，传入 object 时为渐变	string | object	-	3.19.8

// type="dashboard"
// 属性	                 说明	类型	默认值	版本
// width	              仪表盘进度条画布宽度，单位 px	number	132	3.13.1
// strokeWidth	        仪表盘进度条线的宽度，单位是进度条画布宽度的百分比	number	6	3.13.1
// gapDegree	          仪表盘进度条缺口角度，可取值 0 ~ 360	number	0	3.13.1
// gapPosition	        仪表盘进度条缺口位置	Enum{ 'top', 'bottom', 'left', 'right' }	top	3.13.1
